/**
 * 酒秀
 * 9elephas.com
 */

import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import Toast, { DURATION } from 'react-native-easy-toast'//toast页面
import {
  NetInfo, View, Text, StyleSheet, Platform, Image,
  TouchableOpacity, PixelRatio, TextInput, Switch, SwitchAndroid
} from 'react-native';
import * as components from '../'
import * as actions from '../../actions'
import { navToBootstrap, navToTab } from '../../navigation'
import { NavigationActions } from 'react-navigation'


class PreLogin extends Component {


  static navigationOptions = {
    header: null
  }

  constructor(props) {
    super(props)

    this.screenId = props.screenId || 'PreLogin'
    this.state = {
      passwordSwich: true,
      accountNum: null,
      passwordNum: null

    }
  }

  

  // resetstck(){
  //   const resetAction = NavigationActions.reset({
  //     index: 0,
  //     actions: [
  //       NavigationActions.navigate({ routeName: 'PreLogin' })//要跳转到的页面名字
  //     ]
  //   });
  
  //   this.props.navigation.dispatch(resetAction)
  // }

  /**
   * 
   * 忘记密码跳转
   * 
   * @memberOf PreLogin
   */
  reasePasswordNav() {
    let { navigation } = this.props
    //navigation.navigate('ResePassWord')
    navigation.navigate('ResePassWord')
    
  }

  /**
   * 
   * 登陆按钮事件
   * 
   * @memberOf PreLogin
   */
  login() {

    if (this.state.accountNum === null) {
      this.refs.toast.show('请输入手机登录号', DURATION.LENGTH_SHORT)
    } else if (this.state.passwordNum === null) {
      this.refs.toast.show('请输入密码', DURATION.LENGTH_SHORT)
    }
  }

  render() {
    let { navigation } = this.props

    return (
      <components.Layout
        screenId={this.screenId}
        containerStyle={{ justifyContent: 'center', backgroundColor: 'white' }}
      >
        {/* 最上方图片  */}
        <View style={{ height: 60, alignItems: 'center', marginTop: 20 }}>
          <Image source={require('../../image/one_selected.png')}
            style={{ justifyContent: 'center' }} />
        </View>

        {/* 账号  */}
        <View style={styles.inputView}>
          <View style={[styles.view, styles.lineTopBottom]}>
            <Text style={styles.text}>账号:</Text>
            <TextInput
              style={styles.textInputStyle}
              placeholder="请输入账号"
              clearButtonMode="while-editing"
              secureTextEntry={false}
              keyboardType="number-pad"
              underlineColorAndroid={'transparent'}
              onChangeText={(text) => {
                this.setState({
                  accountNum: text
                })
                console.log(this.state.accountNum)
              }}
            />
          </View>
        </View>

        {/* 密码  */}
        <View style={styles.inputView1}>
          <View style={[styles.view, styles.lineTopBottom]}>
            <Text style={styles.text}>密码:</Text>
            <TextInput
              style={styles.textInputStyle}
              placeholder="请输入密码"
              clearButtonMode="while-editing"
              secureTextEntry={this.state.passwordSwich}
              underlineColorAndroid={'transparent'}
              onChangeText={(text) => {
                this.setState({
                  passwordNum: text
                })
              }}
            />
            <Switch
              style={{}}
              //动态改变value
              value={this.state.passwordSwich}
              //当切换开关室回调此方法
              onValueChange={(value) => { this.setState({ passwordSwich: value }) }}
            />
          </View>

          {/* 忘记密码  */}
          <TouchableOpacity style={{
            backgroundColor: 'white', paddingRight: 0
            , width: 70, alignSelf: 'flex-end', paddingTop: 10
          }}
            onPress={() => this.reasePasswordNav()}
          >
            <Text style={{ alignSelf: 'flex-end', paddingRight: 0 }}>忘记密码 </Text>
          </TouchableOpacity>
        </View>


        {/* 登陆按钮  */}
        <components.Button
          text='登录'
          onPress={() => navToTab(navigation)}
          //onPress={() => this.resetstck()} 
          containerStyle={{ marginTop: 50, marginLeft: 50, marginRight: 50 }}
          textStyle={{ fontSize: 16 }}
        //
        />

        {/* 创建账号按钮  */}
        <TouchableOpacity style={{
          backgroundColor: 'white', alignSelf: 'center'
          , width: 70, paddingTop: 10, alignItems: 'center'
        }}>
          <Text style={{}}>创建账号 </Text>
        </TouchableOpacity>

        {/* 虚线  */}


        <components.Button
          text='微博'
          onPress={() => navigation.navigate('Home')}
          containerStyle={{ marginTop: 50, marginLeft: 50, marginRight: 50 }}
          textStyle={{ fontSize: 16 }}
        />
        <components.Button
          text='微信'
          onPress={() => navigation.navigate('Home')}
          containerStyle={{ marginTop: 50, marginLeft: 50, marginRight: 50 }}
          textStyle={{ fontSize: 16 }}
        />
        <Toast
          ref="toast"
          style={{ backgroundColor: 'black' }}
          position='top'
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={1000}
          opacity={0.8}
          textStyle={{ color: 'red' }}
        />
      </components.Layout>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  title: {
    marginVertical: 5
  },
  inputView: {
    padding: 5,
    backgroundColor: '#fff',
    marginTop: 30,
    marginRight: 50,
    marginLeft: 50
  },
  inputView1: {
    padding: 5,
    backgroundColor: '#fff',
    marginTop: 10,
    marginRight: 50,
    marginLeft: 50,
  },
  text: {
    flex: 1,
    lineHeight: 44,
    fontSize: 12,
    justifyContent: 'center',
    textAlign: 'center',
    fontWeight: 'bold'
  },
  view: {
    flexDirection: 'row',
    height: 44
  },
  textInputStyle: {
    flex: 5,
    marginRight: 10,
    fontSize: 15,
    marginBottom: Platform.OS === 'ios' ? 0 : -20,
    textAlignVertical: 'center',
    padding: Platform.OS === 'ios' ? 0 : 5,
    marginTop: Platform.OS === 'ios' ? 0 : 5,
    textAlignVertical: 'center',

  },
  lineTopBottom: {
    borderBottomWidth: 3 / PixelRatio.get(),
    borderColor: 'rgb(208,208,208)'
  },

})

function mapStateToProps(state) {
  return {}
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(PreLogin)
